<template>
  <div class="user-order">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>我的订单</h3>
          <el-radio-group v-model="statusFilter" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="pending">待支付</el-radio-button>
            <el-radio-button label="paid">已支付</el-radio-button>
            <el-radio-button label="completed">已完成</el-radio-button>
            <el-radio-button label="cancelled">已取消</el-radio-button>
          </el-radio-group>
        </div>
      </template>

      <el-table :data="filteredOrders" style="width: 100%">
        <el-table-column label="订单信息" min-width="400">
          <template #default="{ row }">
            <div class="order-info">
              <el-image
                :src="row.course.cover"
                class="course-cover"
                fit="cover"
              />
              <div class="course-detail">
                <h4>{{ row.course.title }}</h4>
                <p>{{ row.course.description }}</p>
                <div class="course-meta">
                  <span>
                    <el-icon><User /></el-icon>
                    {{ row.course.teacher }}
                  </span>
                  <span>
                    <el-icon><Clock /></el-icon>
                    {{ row.course.duration }}课时
                  </span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="订单号" width="180">
          <template #default="{ row }">
            <el-tooltip
              :content="row.orderNo"
              placement="top"
              :show-after="500"
            >
              <span class="order-no">{{ row.orderNo }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="下单时间" width="180">
          <template #default="{ row }">
            {{ row.createTime }}
          </template>
        </el-table-column>

        <el-table-column label="支付方式" width="120">
          <template #default="{ row }">
            <el-tag
              v-if="row.paymentMethod"
              :type="row.paymentMethod === 'alipay' ? 'success' : 'primary'"
            >
              {{ row.paymentMethod === 'alipay' ? '支付宝' : '微信支付' }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column label="金额" width="120">
          <template #default="{ row }">
            <span class="price">¥{{ row.amount }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button
              v-if="row.status === 'pending'"
              type="primary"
              size="small"
              @click="handlePay(row)"
            >
              立即支付
            </el-button>
            <el-button
              v-if="row.status === 'pending'"
              type="danger"
              size="small"
              @click="handleCancel(row)"
            >
              取消订单
            </el-button>
            <el-button
              v-if="row.status === 'paid'"
              type="success"
              size="small"
              @click="handleView(row)"
            >
              查看课程
            </el-button>
            <el-button
              v-if="row.status === 'completed'"
              type="primary"
              size="small"
              @click="handleReview(row)"
            >
              评价课程
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 支付对话框 -->
    <el-dialog
      v-model="payDialogVisible"
      title="订单支付"
      width="400px"
    >
      <div class="pay-dialog">
        <div class="pay-info">
          <div class="pay-item">
            <span class="label">订单号：</span>
            <span class="value">{{ currentOrder?.orderNo }}</span>
          </div>
          <div class="pay-item">
            <span class="label">课程名称：</span>
            <span class="value">{{ currentOrder?.course.title }}</span>
          </div>
          <div class="pay-item">
            <span class="label">支付金额：</span>
            <span class="value price">¥{{ currentOrder?.amount }}</span>
          </div>
        </div>
        <div class="pay-methods">
          <div class="pay-method-title">选择支付方式</div>
          <el-radio-group v-model="paymentMethod">
            <el-radio label="alipay">
              <el-icon><Alipay /></el-icon>
              支付宝
            </el-radio>
            <el-radio label="wechat">
              <el-icon><Wechat /></el-icon>
              微信支付
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="payDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmPay">
            确认支付
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  Clock,
  Alipay,
  Wechat
} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()

// 状态筛选
const statusFilter = ref('all')

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 支付对话框
const payDialogVisible = ref(false)
const currentOrder = ref(null)
const paymentMethod = ref('alipay')

// 订单数据
const orders = ref([
  {
    id: 1,
    orderNo: '202403150001',
    course: {
      id: 1,
      title: 'Vue.js 3.0 实战教程',
      description: '从入门到精通的 Vue.js 3.0 课程',
      cover: 'https://picsum.photos/200/200?random=1',
      teacher: '张老师',
      duration: 24
    },
    createTime: '2024-03-15 14:30:00',
    paymentMethod: null,
    amount: 299,
    status: 'pending'
  },
  {
    id: 2,
    orderNo: '202403140001',
    course: {
      id: 2,
      title: 'React 18 新特性详解',
      description: '深入理解 React 18 的新特性和最佳实践',
      cover: 'https://picsum.photos/200/200?random=2',
      teacher: '李老师',
      duration: 18
    },
    createTime: '2024-03-14 10:20:00',
    paymentMethod: 'alipay',
    amount: 399,
    status: 'paid'
  }
])

// 根据状态筛选订单
const filteredOrders = computed(() => {
  if (statusFilter.value === 'all') {
    return orders.value
  }
  return orders.value.filter(order => order.status === statusFilter.value)
})

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    pending: 'warning',
    paid: 'success',
    completed: 'info',
    cancelled: 'danger'
  }
  return types[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    pending: '待支付',
    paid: '已支付',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status] || status
}

// 处理支付
const handlePay = (order) => {
  currentOrder.value = order
  payDialogVisible.value = true
}

// 确认支付
const confirmPay = () => {
  // TODO: 调用支付 API
  ElMessage.success('支付成功')
  payDialogVisible.value = false
}

// 取消订单
const handleCancel = (order) => {
  ElMessageBox.confirm(
    '确定要取消该订单吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 调用取消订单 API
    ElMessage.success('订单已取消')
  }).catch(() => {})
}

// 查看课程
const handleView = (order) => {
  router.push(`/course/${order.course.id}`)
}

// 评价课程
const handleReview = (order) => {
  router.push(`/course/${order.course.id}/review`)
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // TODO: 重新加载数据
}
</script>

<style scoped>
.user-order {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
}

.order-info {
  display: flex;
  gap: 16px;
}

.course-cover {
  width: 120px;
  height: 80px;
  border-radius: 4px;
}

.course-detail {
  flex: 1;
}

.course-detail h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.course-detail p {
  margin: 0 0 8px;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.course-meta {
  display: flex;
  gap: 16px;
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

.course-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.order-no {
  color: var(--el-text-color-regular);
  font-size: 13px;
}

.price {
  color: var(--el-color-danger);
  font-weight: bold;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.pay-dialog {
  padding: 20px;
}

.pay-info {
  margin-bottom: 20px;
}

.pay-item {
  display: flex;
  margin-bottom: 10px;
}

.pay-item .label {
  width: 80px;
  color: var(--el-text-color-regular);
}

.pay-item .value {
  flex: 1;
}

.pay-method-title {
  margin-bottom: 15px;
  font-weight: bold;
}

.pay-methods {
  padding: 20px;
  background-color: var(--el-fill-color-light);
  border-radius: 4px;
}

.pay-methods .el-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
}

.pay-methods .el-icon {
  font-size: 20px;
}
</style> 